import React from 'react'
import { useRef, useState } from 'react';
import type { FormProps } from 'antd';
import { Button, Modal, Form, Input, Checkbox, message, Avatar } from 'antd';
// 样式 
import '../../layouts/home/nav.css'
import { login } from '../../api/api';
import { useNavigate } from 'react-router';

// const [contextHolder] = message.useMessage();


function Header() {
    const [userInfoShow, setUserInfoShow] = useState(0)
    const [show, setShow] = useState(false)

    // logo移入
    const headleSlipInto = () => {
        setShow(true)
    }
    // logo移出
    const headleSlipOut = () => {
        setShow(false)
    }
    const [open, setOpen] = useState(false)
    const showModel = () => {
        setOpen(true)
    };
    const handleCancel = () => {
        setOpen(false)
    }
    // 登录
    const [toggle, setToggle] = useState(true);
    type FieldType = {
        userName?: string;
        password?: string;
    };

    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        console.log('Success:', values);
        // inputRef.current.input.value = ''
        const { data } = await login(values)
        console.log(data, '=====================>');
        if (data.code === 200) {
            alert('登录成功')

            localStorage.setItem('token', data.token);
            localStorage.setItem('img', JSON.stringify(data.userInfo.img))
            // localStorage.setItem('url', JSON.stringify(data.url));
            setTimeout(() => {
                setOpen(false)
            }, 1000)
        }

    };
    // 登录头像二级
    const headleUserInfoOver = () => {
        setUserInfoShow(450)
    }
    const headleUserInfoOut = () => {
        setUserInfoShow(0)
    }

    // 二级菜单 
    const [userInfoShows,setUserInfoShows]=useState(true)
    const headleUserInfoOvers=()=>{
        setUserInfoShows(360)
    }
    const headleUserInfoOuts=()=>{
        setUserInfoShows(0)
    }


    const headleUserOutLogin = () => {
        localStorage.clear();
        setOpen(true);
    }
    // const navigate = useNavigate()
    // 工作台点击跳转 
    // 退出 
    const headleCreate = () => {
        localStorage.removeItem('token')
        localStorage.removeItem('img')
        // navigate('/create')
    }
    // 工作台 
    const headleWorks = () => {
        location.href = '/Work'
    }

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div >
            {/* {contextHolder} */}
            {/* logo */}
            <a onMouseOver={headleSlipInto} onMouseOut={headleSlipOut} href='http://localhost:5173/' className='headerLogo'>
                <img src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg" alt="" />
            </a>
            {
                show ?
                    <>
                        <img width={56} src="../../public/image1/logoJian.png" alt="" className='homeLogoJian' />
                        <div className='headerCollect'>拖动&nbsp;LOGO&nbsp;到书签栏收藏&nbsp;,&nbsp;方便快速制作</div>
                    </> : ''
            }
            {/* 导航  */}
            <ul className='homeNav' >
                <li><b>免费模版</b><img className='home_Nav_Badge' src="https://lib.eqh5.com/eqx.layout/images/tiphot.svg" alt="" /></li>
                <li>开通会员<img className='home_Nav_Badge' width={50} src="https://lib.eqh5.com/eqx.layout/images/vip_corner_2.png" alt="" /></li>
                <li onMouseOver={headleUserInfoOvers} onMouseOut={headleUserInfoOuts}><span>产品服务 </span>
                    <ol style={{ height: `${userInfoShows}px`,overflow:'hidden' ,width:'600px',background:'#fff',zIndex:99999,position:'absolute'}}>
                        <li>1234566</li>
                    </ol>
                </li>
                <li>解决方案</li>
                <li>内容中台</li>
                <li>资源与合作</li>
            </ul>
            {/* 登录 */}
            {
                localStorage.getItem('token') ?
                    <>
                        {/* 1212121  */}
                        <div className='home_login_sign'>
                            <Button className='headle-create' onClick={headleWorks}>工作台</Button>
                            <div className='header_user'onMouseOver={headleUserInfoOver} onMouseOut={headleUserInfoOut}>
                                <img style={{width:'35px',height:'35px',marginTop:'10px',borderRadius:'50%'}}  src={JSON.parse(localStorage.getItem('img') as string)} />
                                <div className='userInfo' style={{ height: `${userInfoShow}px` }}>
                                    <img style={{width:'35px',height:'35px',marginTop:'10px',borderRadius:'50%'}}   src={JSON.parse(localStorage.getItem('img') as string)} />
                                    <b>{localStorage.getItem('name') as string}</b>
                                    <span>升级会员享受更多权益&nbsp;&gt;</span>
                                    <img src="../public/image/user.png" alt="" />
                                    <div>
                                        <button onClick={headleCreate}>我的作品</button>
                                        <button onClick={headleUserOutLogin}>退出</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </> :
                    <>
                        <div className='home_login_sign'>
                            <Button type="primary" onClick={showModel}>登录/注册</Button>
                        </div>
                        <img width={250} className='home_login_ad' src="../../public/image1/ad.webp" alt="" />
                    </>
            }

            {/* 对话框  */}
            <Modal
                width={800}
                open={open}
                onCancel={handleCancel}
                footer={null}
                closable={false}
            >
                <div className='login'>
                    <div className="login_left">
                        <img style={{ borderRadius: '8px 3px 3px 8px' }} src="../public/image/login.webp" alt="" />
                    </div>
                    <div className="login_right">
                        <div className="phone_login" style={{ display: !toggle ? 'none' : 'block' }}>
                            <h2>手机密码登录</h2>
                            <Form
                                name="basic"
                                labelCol={{ span: 8 }}
                                wrapperCol={{ span: 16 }}
                                style={{ maxWidth: 600 }}
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                                autoComplete="off"
                            >
                                <Form.Item<FieldType>
                                    name="userName"
                                    rules={[{ required: true, message: '请输入账号!' }]}
                                >
                                    <Input placeholder='请输入手机号' style={{ width: '380px', height: '40px' }} />
                                </Form.Item>

                                <Form.Item<FieldType>

                                    name="password"
                                    rules={[{ required: true, message: '请输入密码!' }]}
                                >
                                    {/* ref={inputRef} */}
                                    <Input.Password placeholder='请输入密码' style={{ width: '380px', height: '40px' }} />
                                </Form.Item>
                                <Form.Item >
                                    <Button type="primary" htmlType="submit" style={{ width: '380px', height: '40px', fontWeight: '600' }}>
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    )
}

export default Header
